{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/file-upload/dropzone-bootstrap/dropzone-bootstrap.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}

    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/dropzone/dropzone.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/dropzone-bootstrap/jquery-dropzone.js') }}" type="text/javascript"></script>

{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        
        <div class="page-header">
          <h1>Sticky footer with fixed navbar</h1>
        </div>
        
	    <div id="actions" class="row">
	
	      <div class="col-lg-7">
	        <!-- The fileinput-button span is used to style the file input field as button -->
	        <span class="btn btn-success fileinput-button">
	            <i class="glyphicon glyphicon-plus"></i>
	            <span>Add files...</span>
	        </span>
	        <button type="submit" class="btn btn-primary start">
	            <i class="glyphicon glyphicon-upload"></i>
	            <span>Start upload</span>
	        </button>
	        <button type="reset" class="btn btn-warning cancel">
	            <i class="glyphicon glyphicon-ban-circle"></i>
	            <span>Cancel upload</span>
	        </button>
	      </div>
	
	      <div class="col-lg-5">
	        <!-- The global file processing state -->
	        <span class="fileupload-process">
	          <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
	            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
	          </div>
	        </span>
	      </div>
	
	    </div>
	    
	    <div class="table table-striped" class="files" id="previews">
	
	      <div id="template" class="file-row">
	        <!-- This is used as the file preview template -->
	        <div>
	            <span class="preview"><img data-dz-thumbnail /></span>
	        </div>
	        <div>
	            <p class="name" data-dz-name></p>
	            <strong class="error text-danger" data-dz-errormessage></strong>
	        </div>
	        <div>
	            <p class="size" data-dz-size></p>
	            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
	              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
	            </div>
	        </div>
	        <div>
	          <button class="btn btn-primary start">
	              <i class="glyphicon glyphicon-upload"></i>
	              <span>Start</span>
	          </button>
	          <button data-dz-remove class="btn btn-warning cancel">
	              <i class="glyphicon glyphicon-ban-circle"></i>
	              <span>Cancel</span>
	          </button>
	          <button data-dz-remove class="btn btn-danger delete">
	            <i class="glyphicon glyphicon-trash"></i>
	            <span>Delete</span>
	          </button>
	        </div>
	      </div>
	
	    </div>
	    
	    
    </div> <!-- /container -->
{% endblock %}